<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head th:replace="blogfragments :: head(~{::title})">
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0" />
		<title>首页</title>
		<link rel="stylesheet" href="../static/css/semantic.min.css" >
		<link rel="stylesheet" type="text/css" href="../static/css/manster.css" />
		<link rel="stylesheet" type="text/css" href="../static/plugins/jqcloud/jqcloud.min.css" />

	</head>
	<body id="particles">
		<!-- 导航 -->
		<nav th:replace="blogfragments :: menu(1)" class="ui inverted attached segment m-padded-tb-mini">
			<div class="ui container">
				<div class="ui inverted secondary stackable menu">
					<h2 class="ui teal header item">MansterBlog</h2>
					<a href="#" class="m-item item m-mobile-hide" ><i class="small home icon"></i>首页</a>
					<a href="#" class="m-item item m-mobile-hide" ><i class="small idea icon"></i>分类</a>
					<a href="#" class="m-item item m-mobile-hide" ><i class="small tags icon"></i>标签</a>
					<a href="#" class="m-item item m-mobile-hide" ><i class="small clone icon"></i>归档</a>
					<a href="#" class="m-item item m-mobile-hide" ><i class="small info icon"></i>关于我</a>
					<div class="right m-item item m-mobile-hide">
						<div class="ui icon inverted transparent input">
							<input type="text" placeholder="搜索">
							<i class="search link icon"></i>
						</div>
					</div>
				</div>
			</div>
			<a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
				<i class="sidebar icon"></i>
			</a>
		</nav>
		
		<!-- 中间内容 -->
		<div class="m-container m-padded-tb m-opacity">
			<div class="ui container">
				<div class="ui stackable grid">
					<!-- 左边文章列 -->
					<div class="eleven wide column">
						<!-- 头部 -->
						<div class="ui top attached segment">
							<div class="ui middle aligned two column grid">
								<div class="column">
									<h3 class="ui violet header">博客</h3>
								</div>
								<div class="right aligned column">
									共 <h3 class="ui purple header m-inline-block" th:text="${page.total}"> 14 </h3> 篇
								</div>
							</div>
						</div>
						<!-- 文章content -->
						<div class="ui attached segment">
							<div class="ui padded vertical segment m-padded-tb m-mobile-lr-clear" th:each="blog : ${page.records}">
								<div class="ui middle aligned mobile reversed stackable grid">
									<!-- 文章内容 -->
									<div class="eleven wide column">
										<h3 class="ui header">
											<a class="ui teal ribbon label" th:text="${blog.type.name}">个人总结</a>
											<a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" class="m-black" th:text="${blog.title}">java 多线程</a>
										</h3>
										<p class="m-text" th:text="|${blog.description}......|">在进行多线程的内容之前我们需要首先了解涉及操作系统的几个知识点。一、程序、进程、线程 1. 程序(program)概
										念：是为完成特定任务、用某种语言编写的一组指令的集合。即指一段静态的代码。</p>
										<div class="ui grid">
											<div class="eleven wide column">
												<div class="ui small horizontal link list">
													<div class="item">
														<img src="https://picsum.photos/id/103/100/100" th:src="@{${blog.user.avatar}}" alt="" class="ui avatar image">
														<div class="content"><div class="header m-text-thin" th:text="${blog.user.nickname}">manster</div></div>
													</div>
													<div class="item">
														<i class="calendar icon"></i> <span th:text="${#temporals.format(blog.updateTime, 'yyyy-MM-dd')}">2021-04-09</span>
													</div>
													<div class="item">
														<i class="eye icon"></i> <span th:text="${blog.views}">123</span>
													</div>
												</div>
											</div>
											<div class="five wide column">
												<a href="#" th:href="@{/blog/{id}(id=${blog.id})}" class="ui tiny blue inverted button">阅读全文 <i class="ui hand point left icon"></i></a>
											</div>
										</div>
									</div>
									<!-- 文章图片 -->
									<div class="five wide column">
										<a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank">
											<img src="https://picsum.photos/id/1016/800/450" th:src="@{${blog.firstPicture}}" alt="" class="ui rounded image" >
										</a>
									</div>
								</div>
							</div>
							<!--/*-->
							<div class="ui padded vertical segment m-padded-tb m-mobile-lr-clear">
								<div class="ui mobile reversed stackable grid">
									<!-- 文章内容 -->
									<div class="eleven wide column">

										<h3 class="ui header">
											<a class="ui teal ribbon label">个人总结</a>
											java 多线程
										</h3>
										<p class="m-text">在进行多线程的内容之前我们需要首先了解涉及操作系统的几个知识点。一、程序、进程、线程 1. 程序(program)概
											念：是为完成特定任务、用某种语言编写的一组指令的集合。即指一段静态的代码。</p>
										<div class="ui grid">
											<div class="eleven wide column">
												<div class="ui small horizontal link list">
													<div class="item">
														<img src="https://picsum.photos/id/103/100/100" alt="" class="ui avatar image">
														<div class="content"><div class="header m-text-thin">manster</div></div>

													</div>
													<div class="item">
														<i class="calendar icon"></i> 2021-04-09
													</div>
													<div class="item">
														<i class="eye icon"></i> 123
													</div>
												</div>
											</div>
											<div class="five wide column">
												<a href="#" class="ui tiny blue inverted button">阅读全文 <i class="ui hand point left icon"></i></a>
											</div>
										</div>
									</div>
									<!-- 文章图片 -->
									<div class="five wide column">
										<a href="#" target="_blank">
											<img src="https://picsum.photos/id/1016/800/450" alt="" class="ui rounded image" >
										</a>
									</div>
								</div>
							</div>
							<div class="ui padded vertical segment m-padded-tb m-mobile-lr-clear">
								<div class="ui mobile reversed stackable grid">
									<!-- 文章内容 -->
									<div class="eleven wide column">

										<h3 class="ui header">
											<a class="ui teal ribbon label">个人总结</a>
											java 多线程
										</h3>
										<p class="m-text">在进行多线程的内容之前我们需要首先了解涉及操作系统的几个知识点。一、程序、进程、线程 1. 程序(program)概
											念：是为完成特定任务、用某种语言编写的一组指令的集合。即指一段静态的代码。</p>
										<div class="ui grid">
											<div class="eleven wide column">
												<div class="ui tiny horizontal link list">
													<div class="item">
														<img src="https://picsum.photos/id/103/100/100" alt="" class="ui avatar image">
														<div class="content"><div class="header m-text-thin">manster</div></div>

													</div>
													<div class="item">
														<i class="calendar icon"></i> 2021-04-09
													</div>
													<div class="item">
														<i class="eye icon"></i> 123
													</div>
												</div>
											</div>
											<div class="five wide column">
												<a href="#" class="ui tiny blue inverted button">阅读全文 <i class="ui hand point left icon"></i></a>
											</div>
										</div>
									</div>
									<!-- 文章图片 -->
									<div class="five wide column">
										<a href="#" target="_blank">
											<img src="https://picsum.photos/id/1016/800/450" alt="" class="ui rounded image" >
										</a>
									</div>
								</div>
							</div>
							<div class="ui padded vertical segment m-padded-tb m-mobile-lr-clear">
								<div class="ui mobile reversed stackable grid">
									<!-- 文章内容 -->
									<div class="eleven wide column">

										<h3 class="ui header">
											<a class="ui teal ribbon label">个人总结</a>
											java 多线程
										</h3>
										<p class="m-text">在进行多线程的内容之前我们需要首先了解涉及操作系统的几个知识点。一、程序、进程、线程 1. 程序(program)概
											念：是为完成特定任务、用某种语言编写的一组指令的集合。即指一段静态的代码。</p>
										<div class="ui grid">
											<div class="eleven wide column">
												<div class="ui tiny horizontal link list">
													<div class="item">
														<img src="https://picsum.photos/id/103/100/100" alt="" class="ui avatar image">
														<div class="content"><div class="header m-text-thin">manster</div></div>

													</div>
													<div class="item">
														<i class="calendar icon"></i> 2021-04-09
													</div>
													<div class="item">
														<i class="eye icon"></i> 123
													</div>
												</div>
											</div>
											<div class="five wide column">
												<a href="#" class="ui tiny blue inverted button">阅读全文 <i class="ui hand point left icon"></i></a>
											</div>
										</div>
									</div>
									<!-- 文章图片 -->
									<div class="five wide column">
										<a href="#" target="_blank">
											<img src="https://picsum.photos/id/1016/800/450" alt="" class="ui rounded image" >
										</a>
									</div>
								</div>
							</div>
							<div class="ui padded vertical segment m-padded-tb m-mobile-lr-clear">
								<div class="ui mobile reversed stackable grid">
									<!-- 文章内容 -->
									<div class="eleven wide column">

										<h3 class="ui header">
											<a class="ui teal ribbon label">个人总结</a>
											java 多线程
										</h3>
										<p class="m-text">在进行多线程的内容之前我们需要首先了解涉及操作系统的几个知识点。一、程序、进程、线程 1. 程序(program)概
											念：是为完成特定任务、用某种语言编写的一组指令的集合。即指一段静态的代码。</p>
										<div class="ui grid">
											<div class="eleven wide column">
												<div class="ui tiny horizontal link list">
													<div class="item">
														<img src="https://picsum.photos/id/103/100/100" alt="" class="ui avatar image">
														<div class="content"><div class="header m-text-thin">manster</div></div>

													</div>
													<div class="item">
														<i class="calendar icon"></i> 2021-04-09
													</div>
													<div class="item">
														<i class="eye icon"></i> 123
													</div>
												</div>
											</div>
											<div class="five wide column">
												<a href="#" class="ui tiny blue inverted button">阅读全文 <i class="ui hand point left icon"></i></a>
											</div>
										</div>
									</div>
									<!-- 文章图片 -->
									<div class="five wide column">
										<a href="#" target="_blank">
											<img src="https://picsum.photos/id/1016/800/450" alt="" class="ui rounded image" >
										</a>
									</div>
								</div>
							</div>
							<!--*/-->
						</div>

						<!-- 底部 -->
						<div class="ui bottom attached segment" th:if="${page.pages gt 1}">
							<div class="ui middle aligned three column grid">
								<div class="left aligned column">
									<a href="#" th:href="@{/(current=${page.current}-1)}" th:unless="${page.current le 1}" class="ui inverted blue left labeled icon button">上一页<i class="left arrow icon"></i></a>
								</div>
								<div class="center aligned column">
									第<a th:text="${page.current}">1</a>页/共<a th:text="${page.pages}">1</a>页
								</div>
								<div class="right aligned column">
									<a href="#" th:href="@{/(current=${page.current}+1)}" th:unless="${page.current ge page.pages}" class="ui inverted blue right labeled icon button"><i class="right arrow icon"></i>下一页</a>
								</div>
							</div>
						</div>

					</div>
					
					<!-- 右边列表 -->
					<div class="five wide column">
						
						<!-- 分类 -->
						<div class="ui segments">
							
							<!-- 头部 -->
							<div class="ui secondary segment">
								<div class="ui two column grid">
									<div class="column">
										<i class="sort icon"></i>分类
									</div>
									<div class="right aligned column">
										<a href="#" th:href="@{/types/-1}" target="_blank">more <i class="angle double right icon small"></i></a>
									</div>
								</div>
							</div>
							<!-- 内容 -->
							<div class="ui violet segment">
								<div class="ui fluid vertical menu" th:each="type : ${types}">
									<a href="#" th:href="@{/types/{id}(id=${type.id})}" class="item">
										<span th:text="${type.name}">学习日志</span>
										<div class="ui blue left pointing label" th:text="${#arrays.length(type.blogs)}">12</div>
									</a>
								</div>
								<!--/*-->
								<div class="ui fluid vertical menu">
									<a href="#" class="item">
										学习日志
										<div class="ui blue left pointing label">12</div>
									</a>
								</div>
								<div class="ui fluid vertical menu">
									<a href="#" class="item">
										学习日志
										<div class="ui blue left pointing label">12</div>
									</a>
								</div>
								<!--*/-->
							</div>
						</div>

						<!-- 标签 -->
						<div class="ui segments m-margin-top-large">
							
							<!-- 头部 -->
							<div class="ui secondary segment">
								<div class="ui two column grid">
									<div class="column">
										<i class="tags icon"></i>标签
									</div>
									<div class="right aligned column">
										<a href="#" target="_blank">more <i class="angle double right icon small"></i></a>
									</div>
								</div>
							</div>
							
							<!-- 内容 -->
							<div class="ui red segment" id="tags" style="width: 100%; height: 200px;">
								<!--/*-->
								<a href="#" target="_blank" class="ui violet tag label m-margin-tb-tiny">
									java基础 <div class="detail">8</div>
								</a>
								<a href="#" target="_blank" class="ui violet tag label m-margin-tb-tiny">
									SSM <div class="detail">12</div>
								</a>
								<a href="#" target="_blank" class="ui violet tag label m-margin-tb-tiny">
									SpringBoot <div class="detail">10</div>
								</a>
								<a href="#" target="_blank" class="ui violet tag label m-margin-tb-tiny">
									Hadoop <div class="detail">18</div>
								</a>
								<a href="#" target="_blank" class="ui violet tag label m-margin-tb-tiny">
									Hive <div class="detail">28</div>
								</a>
								<!--*/-->
							</div>
						</div>
						
						<!-- 最新推荐 -->
						<div class="ui segments m-margin-top-large">							
							<!-- 头部 -->
							<div class="ui secondary segment">
								<i class="bookmark icon"></i>最新推荐
							</div>
							<div class="ui segment" th:each="blog : ${blogs}">
								<a href="#" th:href="@{/blog/{id}(id=${blog.id})}" target="_blank" th:text="${blog.title}" class="m-black">用户故事（User Story）</a>
							</div>
							<!--/*-->
							<div class="ui segment">
								<a href="#" target="_blank" class="m-black">用户故事（User Story）</a>
							</div>
							<div class="ui segment">
								<a href="#" target="_blank" class="m-black">用户故事（User Story）</a>
							</div>
							<div class="ui segment">
								<a href="#" target="_blank" class="m-black">用户故事（User Story）</a>
							</div>
							<div class="ui segment">
								<a href="#" target="_blank" class="m-black">用户故事（User Story）</a>
							</div>
							<div class="ui segment">
								<a href="#" target="_blank" class="m-black">用户故事（User Story）</a>
							</div>
							<!--*/-->
						</div>
						
						<!-- 二维码 -->
						<h4 class="ui horizontal divider header m-white">扫码关注我</h4>
						<div class="ui centered card m-white" style="width: 11em;">
							<img src="../static/images/weichat.jpg" th:src="@{/images/weichat.jpg}" alt="" class="ui rounded image" >
						</div>
					</div>
				</div>
			</div>
			
			
			
			
		</div>
		
		<!-- 底部 -->
		<footer th:replace="blogfragments :: footer" class="ui inverted vertical segment m-padded-tb-large">
			<div class="ui center aligned container">
				<div class="ui inverted divided stackable grid">
					<div class="three wide column">
						<div class="ui inverted link list">
							<div class="item">
								<img src="../static/images/weichat.jpg" class="ui rounded image" alt="" style="width: 110px;">
							</div>
						</div>
					</div>
					<div class="three wide column">
						<h4 class="ui inverted header m-text-thin m-text-spaced">最新Blog</h4>
						<div class="ui inverted link list">
							<a href="#" class="item">java 多线程</a>
							<a href="#" class="item">java 集合</a>
							<a href="#" class="item">java 反射</a>
						</div>
					</div>
					<div class="four wide column">
						<h4 class="ui inverted header m-text-thin m-text-spaced">联系我</h4>
						<div class="ui inverted link list">
							<a href="https://gitee.com/manster1231" target="_blank" class="item">Gitee：https://gitee.com/manster1231</a>
							<a href="#" class="item">Email：manster1231@163.com</a>
							<a href="#" class="item">QQ：1249041911</a>
						</div>
					</div>
					<div class="six wide column">
						<h4 class="ui inverted header m-text-thin m-text-spaced">manster</h4>
						<p class="m-text-thin m-text-spaced m-opacity-mini">这里是manster的博客，有关我所知道的一切都愿与你交流</p>
						<p class="m-text-thin m-text-spaced m-opacity-mini">Talk is cheap show me the code</p>
					</div>
				</div>
				<div class="ui inverted section divider"></div>
				<p class="m-text-thin m-text-spaced m-opacity-tiny">CopyRight © 2021 - 2021 manster Designed by manster</p>
			</div>
		</footer>
		
<!--/*/<th:block th:replace="blogfragments :: script">/*/-->
			<script src="../static/js/jquery-3.3.1.js" ></script>
			<script src="../static/js/semantic.min.js" ></script>
			<script src="../static/js/snow.js" ></script>
			<script src="../static/plugins/jqcloud/jqcloud.min.js" ></script>
<!--/*/</th:block>/*/-->

		<script th:inline="javascript">
			$('.menu.toggle').click(function(){
				$('.m-item').toggleClass('m-mobile-hide');
			});

			let words = [];
			let tags = [[${tags}]];
			for (let i = 0; i < tags.length; i++) {
				obj = new Object();
				obj.text = tags[i].name;
				obj.weight = tags[i].blogs.length;
				//obj.link = "/search?search=" + tags[i].id + "&isLabel=1";
				words.push(obj);
			}


			//云标签样式操作
			$("#tags").jQCloud(words, {
				delay: 50,
				colors: ["#0000FF", "#1E90FF", "#00BFFF", "#87CEEB", "#87CEFA", "#FF3030", "#4F4F4F", "#FF1493", "#A020F0"],
				fontSize: {
					from: 0.1,
					to: 0.02
				}
			});
		</script>
	</body>
</html>
